<template>
  <div class="service_contract">
    <div class="flex align-center table-top-btns">
      <h5 class="record_header">推广员列表</h5>
      <el-button
          size="small"
          icon="el-icon-plus"
          class="add-btn"
          @click="addPromoter"
      >新增推广员</el-button>
    </div>
    <div class="common_form_search">
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <el-form-item label="推广员姓名">
          <el-input
              v-model="searchForm.name"
              style="width: 230px"
              placeholder="请输入推广员姓名"
              clearable
          />
        </el-form-item>
        <el-form-item label="推广员电话">
          <el-input
              v-model="searchForm.phone"
              placeholder="请输入推广员电话"
              clearable
          />
        </el-form-item>
        <el-form-item label="推广员id">
          <el-input
              v-model="searchForm.promoter_id"
              placeholder="请输入推广员id"
              clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button
              size="small"
              type="primary"
              @click="search()"
          >查询</el-button>
          <el-button
              size="small"
              @click="reset()"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" border>
      <el-table-column align="center" width="80" prop="id" label="ID" />
      <el-table-column align="center" width="200" prop="promoter_id" label="推广员ID" />
      <el-table-column align="center" width="80" prop="name" label="姓名">
        <!-- <template slot-scope="scope">
          <span
            class="blue-font pointer"
            @click="goToOrder(scope.row.trade_no)"
          >{{ scope.row.trade_no }}</span>
        </template> -->
      </el-table-column>
      <el-table-column align="center" prop="phone" label="电话" />
      <el-table-column align="center" prop="share_type" label="分成类型">
        <template slot-scope="scope">
          <span>{{ scope.row.share_type == 0 ? '数值': '比例' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="share_proportion" label="分成" />
      <!--      <el-table-column align="center" width="300" prop="app_url" label="短链">-->
      <!--        <template slot-scope="scope">-->
      <!--          <span-->
      <!--            class="blue-font pointer"-->
      <!--            @click="copyText(getLink(scope.row))"-->
      <!--          >{{ getLink(scope.row) }}</span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column align="center" label="二维码" width="200">-->
      <!--        <template slot-scope="scope">-->
      <!--          <el-button @click="lookQrcode(scope.row)">查看</el-button>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column align="center" label="h5二维码" width="300">
        <template slot-scope="scope">
          <el-button @click="lookQrcode(scope.row,'h5二维码')">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="微信小程序二维码" width="300">
        <template slot-scope="scope">
          <el-button @click="lookWxMiniQrcode(scope.row,'微信小程序二维码')">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" fixed="right" width="250">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="primary"
              @click="changePW(scope.row)"
          >修改密码</el-button>
          <el-button
              size="mini"
              type="primary"
              @click="changeFC(scope.row)"
          >修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <custom-page
        ref="customPage"
        :total="total"
        @getList="getList"
    />
    <add-promoter
        ref="addPromoter"
        :select-row="selectRow"
        @getList="getList"
    />
    <change-p-w-promoter
        ref="changePWPromoter"
        :select-row="selectRow"
        @getList="getList"
    />
    <change-p-w-promoter
        ref="changePWPromoter"
        :select-row="selectRow"
        @getList="getList"
    />
    <UploadPromoter
        ref="editPromoter"
        :select-row="selectRow"
        @getList="getList"
    />
    <generateQrcode ref="qrcode" />
  </div>
</template>

<script>
import {
  getPromoterList
} from '@/api/promoter'
import customPage from '@/components/customPage'
import AddPromoter from './components/addPromoter.vue'
import UploadPromoter from './components/updatePromoter.vue'
import changePWPromoter from './components/changePWPromoter.vue'
import editPromoter from './components/editPromoter.vue'
import generateQrcode from './components/generateQrcode.vue'
export default {
  components: { generateQrcode, AddPromoter, customPage, changePWPromoter, editPromoter, UploadPromoter },
  data() {
    return {
      tableData: [],
      total: 0,
      searchForm: {
        trade_no: '',
        name: '',
        promoter_id: '',
        create_time: ''
      },
      qrData: {},
      risk_credit_automatic: 0,
      risk_credit_amount: 0,
      disabled: false,
      selectRow: null
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 新增推广员
    addPromoter() {
      this.$refs.addPromoter.dialogVisible = true
    },
    lookQrcode(row, title) {
      this.$refs.qrcode.open(row)
    },
    lookWxMiniQrcode(row, title) {
      this.$refs.qrcode.openWithWx(row)
    },
    getLink(row) {
      // return location.origin + '/pro-api/Admin/ThirdApi/promoterLink?promoter_id=' + row.promoter_id
      return row.link
    },
    copyText(t) {
      // 如果当前浏览器版本不兼容navigator.clipboard
      if (!navigator.clipboard) {
        var ele = document.createElement('input')
        ele.value = t
        document.body.appendChild(ele)
        ele.select()
        document.execCommand('copy')
        document.body.removeChild(ele)
        if (document.execCommand('copy')) {
          this.$message.success('复制成功')
        } else {
          this.$message.error('复制失败')
        }
      } else {
        navigator.clipboard.writeText(t).then(() => {
          this.$message.success('复制成功')
        }).catch((e) => {
          this.$message.error('复制失败')
        })
      }
    },
    changePW(row) {
      this.selectRow = row
      this.$refs.changePWPromoter.dialogVisible = true
    },
    //
    changeFC(row) {
      this.selectRow = row
      this.$refs.editPromoter.open(row)
    },
    // 查询
    search() {
      this.$refs.customPage.page = 1
      this.getList()
    },
    // 重置
    reset() {
      this.searchForm = {
        // order_id: '',
        name: '',
        // user_mobile: '',
        phone: ''
      }
      this.getList()
    },
    // 获取数据
    getList() {
      const { page, pageSize } = this.$refs.customPage
      getPromoterList({
        page,
        pageSize,
        ...this.searchForm
      }).then((res) => {
        this.tableData = res.data || []
        this.total = res.total || 0
        // this.risk_credit_automatic = risk_credit_automatic
        // this.risk_credit_amount = risk_credit_amount
      })
    },
    goToOrder(orderId) {
      if (orderId) {
        this.$router.push({ name: 'orderList', params: { orderId }})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  height: 300px;
  .el-divider--horizontal {
    margin: 20px 0;
  }
}
.right {
  width: 345px;
  margin-left: 20px;
  padding: 20px;
  border: 1px solid #e6e6e6;
  p {
    line-height: 32px;
  }
  span {
    font-size: 16px;
  }
  .el-tag {
    color: #ff8500;
    margin-top: 10px;
    font-size: 14px;
  }
}
.record_header {
  padding-left: 15px;
  border-left: 3px solid $mainBlue;
  margin: 20px 20px 20px 0;
}
</style>
